<template>
  <div class="scroll-wrapper" ref="myarticle" @scroll="remember()">
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :success-text="successText"
      success-duration="1500"
    >
      <!-- 瀑布流加载效果实现 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell 
          v-for="item in articleList" 
          :key="item.art_id.toString()" 
          :title="item.title"
          @click="$router.push({name:'article',params:{aid:item.art_id.toString()}})"
          >
          <!-- 通过命名插槽方式体现单元格下方描述信息 -->
          <template slot="label">
            <!-- 新闻封面图片 -->
            <van-grid
              :column-num="item.cover.type"
              :gutter="10"
              :border="false"
              v-if="item.cover.type>0"
            >
              <van-grid-item v-for="item2 in item.cover.type" :key="item2">
                <van-image width="85" height="85" :src="item.cover.images[item2-1]" lazy-load />
              </van-grid-item>
            </van-grid>
            <p>
              <!-- name="close"代表叉号 -->
              <van-icon
                name="close"
                style="float:right;"
                @click="displayDialog(item.art_id.toString())"
              />
              <span>作者：{{item.aut_name}}</span>&nbsp;
              <span>评论：{{item.comm_count}}</span>&nbsp;
              <span>时间：{{item.pubdate | formatTime}}</span>&nbsp;
            </p>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 文章更多操作弹出层 -->
    <!--  :articleID="nowArticleID" 把当前目标文章id传递给子组件 -->
    <more-action
      v-model="showDialog"
      :articleID="nowArticleID"
      @dislikeSuccess="handleDislikeSuccess()"
    ></more-action>
  </div>
</template>

<script>
// 对子组件 com-moreaction.vue 做导入.注册.使用
import MoreAction from "./com-moreaction.vue";
// 获得文章列表的api
import { apiArticleList } from "@/api/article.js";
export default {
  name: "com-article",
  components: {
    MoreAction
  },
  // 接受父组件传递过来的频道id信息
  // 1. 简易方式接收
  // props: ['channelID'],
  // 2. 高级方式接收
  props: {
    channelID: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      nowTop: 0, // 记录滚动条卷起的高度
      successText: '文章更新成功', // 下拉动作完成的动画提示内容
      nowArticleID: "", // 被处理的文章ID
      showDialog: false, // 控制子组件弹出框显示的标志
      articleList: [], // 文章列表信息
      // 通过ts声明时间戳条件，这样后期可以灵活发生变化
      ts: Date.now(), // 文章列表分页“时间戳”条件
      // 下拉成员
      isLoading: false,
      // 设置频道默认激活项目
      list: [], // 数据源
      loading: false, // 瀑布流是否加载处于动画效果
      finished: false // 瀑布流是否停止
    };
  },
  created() {
    // 获取真实文章列表数据
    this.getArticleList();
  },
  activated () {
    if (this.nowTop) {
      // 组件被激活，设置滚动条卷起高度为离开时候的位置
      this.$refs.myarticle.scrollTop = this.nowTop
    }
  },
  methods: {
    // 获得滚动条卷起的高度，并赋予给nowTop
    remember () {
      this.nowTop = this.$refs.myarticle.scrollTop
    },
    // 文章不感兴趣的处理，清楚文章
    handleDislikeSuccess() {
      const index = this.articleList.findIndex(item => {
        return item.art_id.toString() === this.nowArticleID;
      });
      // 通过下标序号从列表删除指定文章
      this.articleList.splice(index, 1);
    },
    // artID：被处理文章的id
    // 展示子组件弹出逻辑框
    displayDialog(artID) {
      this.showDialog = true; // 弹出框显示
      // date接收artID
      this.nowArticleID = artID;
    },
    // 获取文章列表信息
    async getArticleList() {
      // 调用api数据
      const obj = {
        channel_id: this.channelID,
        timestamp: this.ts
      };
      const result = await apiArticleList(obj);
      return result;
    },
    // 下拉执行操作
    // onRefresh() {
    //   // 设置1s延迟
    //   setTimeout(() => {
    //     this.onLoad(); // 调用上拉数据获取
    //     this.isLoading = false; // 下拉加载完成/结束加载动画
    //     this.$toast.success("刷新成功"); // 成功提示
    //   }, 1000);
    // },
    async onRefresh () {
      // 延时器0.8秒
      await this.$sleep(800)
      // 获取文章
      const articles = await this.getArticleList()

      // 头部追加新文章，更新时间戳
      // this.articleList.unshift(...articles.results)
      // this.ts = articles.pre_timestamp
      if (articles.results.length > 0) {
        // 头部追加新文章，更新时间戳
       this.articleList.unshift(...articles.results)
       this.ts = articles.pre_timestamp
      } else {
        // 提示：已经是最新的了
        this.successText = '已经是最新的了'
      }
      // 下拉动画结束
      this.isLoading = false
    },
    async onLoad() {
      // 每次执行给延迟0.8秒
      await this.$sleep(800);

      // 1. 获得真实文章数据
      const articles = await this.getArticleList();
      if (articles.results.length > 0) {
        this.articleList.push(...articles.results);
        this.ts = articles.pre_timestamp;
      } else {
        this.finished = true;
      }
      this.loading = false;
    }
  }
};
</script>

<style scoped lang='less'>
// 给上拉列表区域设置样式
.scroll-wrapper {
  height: 100%;
  // 瀑布流区域如果垂直方向内容过多，要呈现滚动条
  // 是瀑布实现的关键要素
  overflow-y: auto;
}
</style>